<%--
  Created by IntelliJ IDEA.
  User: guo
  Date: 2018/4/19
  Time: 10:55
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"
      integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<html>
<head>
    <title>图书管理员注册页面</title>
    <script type="text/javascript">
        //切换验证码
        function changeCode() {
            var img = document.getElementById("validateimage");
            img.src = "${pageContext.request.contextPath}/app/admin/getCode?a=" + new Date().getTime();
        }


        function checkUsername() {
            //校验用户名格式
            var reg = /^[a-zA-Z]\w{1,11}$/;
            var username = document.getElementById("username").value;// 获取用户名
            var message = document.getElementById("u");

            var f = reg.test(username);
            if (f == false) {
                message.innerText = "用户名格式不对";
                message.style.color = "red";
                return;
            }
            // 1.获取异步交互对象
            var xmlhttp = createXMLHttpRequest();
            // 2.设置监听
            xmlhttp.onreadystatechange = function () {
                if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                    var flag = xmlhttp.responseText;

                    if (flag == "false") {
                        message.innerText = "用户名已经存在";
                        message.style.color = "red";
                    } else {
                        message.innerText = "用户名可以使用";
                        message.style.color = "green";
                    }

                }
            };
            // 3.打开连接(为了避免浏览器的缓存，需要加一个时间参数)
            xmlhttp.open("GET", "${pageContext.request.contextPath}/app/admin/findByUsername?username=" + username, true);
            // 4.发送请求
            xmlhttp.send(null);

        }

        // 创建XMLHttpRequest对象
        function createXMLHttpRequest() {
            try {
                return new XMLHttpRequest();
            } catch (e) {
                try {
                    return new ActiveXObject("Msxml2.XMLHTTP");
                } catch (e) {
                    try {
                        return new ActiveXObject("Microsoft.XMLHTTP");
                    } catch (e) {
                        alert("你用什么浏览器呢？");
                        throw e;
                    }
                }
            }
        }
    </script>
</head>
<body style="background-image: url('${pageContext.request.contextPath}/images/005.jpg')">
<form action="${pageContext.request.contextPath}/app/admin/register">
    <table align="center">
        <tr>
            <td>Username</td>
            <td><input type="text" id="username" name="username" class="text" maxlength="20" placeholder="用户名长度在3-12为之间"
                       title="用户名长度在3-12为之间" value="${username}" onblur="checkUsername()"><span id="msg"></span>
                &nbsp;<span id="u"><font color="#ccc">用户名必须是数字、字母和下划线</font></span>
                <span style="color:red;"></span>
        <tr>
            <td>Password</td>
            <td><input type="password" name="password" value=""></td>
        </tr>
        <tr>
            <th>
                <span class="requiredField">*</span>验证码:
            </th>
            <td>
										<span class="fieldSet">
                                             <input type="text" id="validatecode" name="code" class="text captcha"
                                                    maxlength="4" autocomplete="off"/>
											<img id="validateimage" class="captchaImage"
                                                            src="${pageContext.request.contextPath}/app/admin/getCode"
                                                            onclick="changeCode()" title="点击更换验证码"/>
                                        </span>
                <span style="color: red;display: block">${codeMsg}</span>
            </td>
        </tr>

        <tr>
            <td><input type="submit" value="提交"></td>
            <td><input type="button" value="返回"
                       onclick="javascript:window.location.href ='${pageContext.request.contextPath}/app/admin/sendToLoginPage'">
            </td>
        </tr>
    </table>


</form>
</body>
</html>
